<template>
  <div class="classmodal">
    <a-card class="header">
      <div class="flex items_center">
        <div @click="hanleClose" class="pointer">
          <CloseOutlined /><span>关闭</span>
        </div>
        <div class="gray_line"></div>
        <span class="font_1">预览</span>
      </div>
    </a-card>
    <div class="flex justify_center">
      <a-card title="自己创建的模版-培训总结报告" class="models_area">
        <img src="./assets/img/head_bg.png" alt="" class="head_bg" />
        <div
          :id="`component-box${index}`"
          class="component-box"
          :class="item && item.isHalf ? 'half' : ''"
          v-for="(item, index) in components"
          :key="index"
          @click="onActive(index)"
        >
          <component
            class="component"
            :class="isActive == index ? 'component-edit-active' : ''"
            :is="item.nameId"
            :echartsId="index"
            :isView="1"
          ></component>
        </div>
      </a-card>
    </div>
  </div>
</template>
<script>
import { CloseOutlined } from "@ant-design/icons-vue";
import Basic from "./components/Basic.vue";
import DataOverview from "./components/DataOverview.vue";
import OnlineCourseFinish from "./components/OnlineCourseFinish.vue";
import OnlineExamPass from "./components/OnlineExamPass.vue";
import OfflineCourseAttendance from "./components/OfflineCourseAttendance.vue";
import OnlineExamPassRank from "./components/OnlineExamPassRank.vue";
import OnlineCourseFinishDetail from "./components/OnlineCourseFinishDetail.vue";
import OnlineCourseDepartmentFinishDetail from "./components/OnlineCourseDepartmentFinishDetail.vue";
import DepartmentOnlineExamPassDetail from "./components/DepartmentOnlineExamPassDetail.vue";
import DepartmentOutlineExamPassDetail from "./components/DepartmentOutlineExamPassDetail.vue";
import DepartmentOutlineCourseCheckDetail from "./components/DepartmentOutlineCourseCheckDetail.vue";
import TeacherEvaluationCardTitDetail from "./components/TeacherEvaluationCardTitDetail.vue";
import TeacherEvaluationSubjectiveDetail from "./components/TeacherEvaluationSubjectiveDetail.vue";
import StudentStatisticalSummary from "./components/StudentStatisticalSummary.vue";
import DepartmentStatisticalSummary from "./components/DepartmentStatisticalSummary.vue";
export default {
  provide() {
    return {
      isView: 1,
    };
  },
  data() {
    return {
      isActive: -1,
      index: 0,
      components: [], //需要渲染的组件数据
    };
  },
  created() {
    this.get_data();
  },
  mounted() {},
  components: {
    CloseOutlined,
    Basic,
    DataOverview,
    OnlineCourseFinish,
    OnlineExamPass,
    OfflineCourseAttendance,
    OnlineExamPassRank,
    OnlineCourseFinishDetail,
    OnlineCourseDepartmentFinishDetail,
    DepartmentOnlineExamPassDetail,
    DepartmentOutlineExamPassDetail,
    DepartmentOutlineCourseCheckDetail,
    TeacherEvaluationCardTitDetail,
    TeacherEvaluationSubjectiveDetail,
    StudentStatisticalSummary,
    DepartmentStatisticalSummary,
  },
  methods: {
    get_data() {
      this.components.push(
        {
          nameId: "Basic",

          isHalf: false,
        },
        {
          nameId: "DataOverview",

          isHalf: false,
        },
        {
          nameId: "OnlineCourseFinish",

          isHalf: true,
        },
        {
          nameId: "OnlineExamPass",

          isHalf: true,
        },

        {
          nameId: "OfflineCourseAttendance",

          isHalf: true,
        },
        {
          nameId: "OnlineCourseFinishDetail",
          isHalf: false,
        },
        {
          nameId: "OnlineCourseDepartmentFinishDetail",
          isHalf: false,
        },
        {
          nameId: "DepartmentOnlineExamPassDetail",
          isHalf: false,
        },
        {
          nameId: "DepartmentOutlineExamPassDetail",
          name: "+部门线下考试通过明细",
          isHalf: false,
        },
        {
          nameId: "DepartmentOutlineCourseCheckDetail",
          name: "+部门线下课考勤明细",
          isHalf: false,
        },
        {
          nameId: "TeacherEvaluationCardTitDetail",
          name: "+讲师评价-评价项得分明细",
          isHalf: false,
        },
        {
          nameId: "TeacherEvaluationSubjectiveDetail",
          name: "+讲师评价-主观题答题明细",
          isHalf: false,
        },
        {
          nameId: "StudentStatisticalSummary",
          name: "+学员统计汇总",
          isHalf: false,
        },
        {
          nameId: "DepartmentStatisticalSummary",
          name: "+部门统计汇总",
          isHalf: false,
        }
      );
    },
    hanleClose() {
      this.$emit("closeView");
    },
  },
};
</script>
<style lang="less" scoped>
.header {
  width: 100%;
  position: fixed;
  z-index: 100;
}
.flex {
  display: flex;
}
.flex_1 {
  flex: 1;
}

.justify_center {
  justify-content: center;
}
.items_center {
  align-items: center;
}
.mb_15 {
  margin-bottom: 15px;
}
.padding_top15 {
  padding-top: 15px;
}
.font_1 {
  font-family: PingFang SC;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: left;
}
.view_container {
  background-color: #f5f5f5;
  padding-bottom: 80px;
}
.models_area {
  position: relative;
  width: 896px;
  top: 90px;
}
.head_bg {
  width: 100%;
}

.component-box {
  position: relative;
  padding: 12px;

  .component {
    border: unset;
    position: relative;
    border-radius: 4px;
  }

  .component-btns {
    position: absolute;
    z-index: 10;
    bottom: -38px;
    right: 12px;
    background-color: #fff;
    width: fit-content;
    height: 52px;
    padding: 16px;

    .component-btn {
      display: inline-block;
      height: 20px;
      margin-right: 32px;
      cursor: pointer;
    }

    .component-btn:last-child {
      margin-right: 0;
    }
  }
}

.half {
  display: inline-block;
  width: 50%;
}

.component-box:first-child {
  padding-top: 0;
}
.gray_line {
  width: 1px;
  height: 12.59px;
  background-color: #dbdddf;
  margin: 0 16px;
}
.blue_hint {
  width: 8px;
  height: 22px;
  background: #0093ff;
}
.pointer {
  cursor: pointer;
}
</style>
